<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascadesss"></i> 基础表格
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <el-form :inline="true" :inref="form" :model="form" label-width="80px">
      <el-col   :span="24" >

        <el-input v-model="querys.eno" placeholder="编号" class="handle-input mr10"></el-input>
      </el-col>

      <el-button
          type="primary"
          icon="el-icon-search"
          class="handle-del mr10"
          @click="getDatas"
      >查找</el-button>
    </el-form>

    <div class="container">
<!--      <div class="handle-box">-->
<!--        <el-button-->
<!--            type="primary"-->
<!--            icon="el-icon-delete"-->
<!--            class="handle-del mr10"-->
<!--            @click="delAllSelection"-->
<!--        >批量删除</el-button>-->
<!--        <el-select v-model="name" placeholder="地址" class="handle-select mr10">-->
<!--          <el-option key="1" label="广东省" value="广东省"></el-option>-->
<!--          <el-option key="2" label="湖南省" value="湖南省"></el-option>-->
<!--          <el-option key="2" label="辽宁省" value="湖南省"></el-option>-->
<!--        </el-select>-->
<!--        <el-input v-model="ename" placeholder="姓名" class="handle-input mr10"></el-input>-->
<!--        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>-->
<!--      </div>-->
      <el-table
          :data="tableDatas"

          border
          class="table"
          ref="multipleTable"
          header-cell-class-name="table-header">


<!--        <el-table-column type="selection" width="55" align="center"></el-table-column>-->
<!--         <el-table-column prop="eno"-->
<!--                         label="编号"-->
<!--                         width="150"-->
<!--                         align="center">-->

<!--        </el-table-column>-->
        <el-table-column prop="ename"
                         label="姓名"
                         width="70"
                         align="center">
        </el-table-column>
        <el-table-column prop="esex"
                         label="性别"
                         width="55"
                         align="center">

        </el-table-column>
        <el-table-column prop="ebirth"
                         label="生日"
                         width="150"
                         align="center">

        </el-table-column>
        <el-table-column prop="ejoin"
                         label="入职日期"
                         width="150"
                         align="center">

        </el-table-column>
        <el-table-column prop="setion"
                         label="部门"
                         width="55"
                         align="center">

        </el-table-column>
        <el-table-column prop="ekind"
                         label="人员类别"
                         width="80"
                         align="center">

        </el-table-column>
        <el-table-column prop="tkind"
                         label="技术类别"
                         width="80"
                         align="center">

        </el-table-column>
        <el-table-column prop="jobtitle"
                         label="技术职称"
                         width="80"
                         align="center">

        </el-table-column>
        <el-table-column prop="ec"
                         label="文化程度"
                         width="80"
                         align="center">
        </el-table-column>
        <el-table-column prop="nation"
                         label="民族"
                         width="55"
                         align="center">
        </el-table-column>
        <el-table-column prop="addr"
                         label="籍贯"

                         align="center">

        </el-table-column>
        <el-table-column prop="naddr"
                         label="现住址"

                         align="center">
          <template #default="scope">
            <el-input v-model="scope.row.eno" :disabled="!scope.row.disabled"></el-input>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <el-button
                type="text"
                icon="el-icon-edit"
                @click="handleEdit( scope.row)"
            >编辑</el-button>
            <el-button
                type="text"
                icon="el-icon-delete"
                class="red"
                @click="handleDelete"
            >删除</el-button>
            <el-button v-if="scope.row.edit"  size="mini" icon="el-icon-refresh"
                       type="text"  @click="handleCancle(scope.row)">取消
            </el-button>
            <el-button v-if="scope.row.edit"  size="mini" icon="el-icon-refresh"
                       type="text" @click="handleSave">保存
            </el-button>
          </template>
        </el-table-column>
      </el-table>
<!--      <div class="pagination">-->
<!--        <el-pagination-->
<!--            background-->
<!--            layout="total, prev, pager, next"-->
<!--            :current-page="sex"-->
<!--            :page-size="55"-->
<!--            :total="pageTotal"-->
<!--            @current-change="handlePageChange"-->
<!--        ></el-pagination>-->
<!--      </div>-->
    </div>

    <!-- 编辑弹出框 -->
<!--    <el-dialog title="编辑" v-model="editVisible" width="30%">-->
<!--      <el-form ref="form" :model="form" label-width="70px">-->
<!--        <el-form-item label="用户名">-->
<!--          <el-input v-model="form.ename"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="地址">-->
<!--          <el-input v-model="form.addr"></el-input>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--      <template #footer>-->
<!--                <span class="dialog-footer">-->
<!--                    <el-button @click="editVisible = false">取 消</el-button>-->
<!--                    <el-button type="primary" @click="saveEdit">确 定</el-button>-->
<!--                </span>-->
<!--      </template>-->
<!--    </el-dialog>-->
  </div>
</template>

<script>
import {fetchData_employees} from "../api/index";
export default {
  name: "tableData",
  data() {
    return {
      querys:{
        operation:"selec",
        // month:"",
        eno:""
      },
      tableDatas:[{


      },{


      },{


      },
      ]

    };
  },
  // created() {
  //   this.getDatas();
  // },
  methods: {
      // 获取 easy-mock 的模拟数据
      getDatas() {
        this.querys.operation="selec"
        fetchData_employees(this.querys).then(res => {
          console.log(res);
          console.log(res.data);
          this.tableDatas[0] = res.data;
          // this.tableData = res.list;
          // this.pageTotal = res.pageTotal || 50;
        });
      },
    handleEdit( row){
      // this.idx = index;
      // this.form = row;
      // this.editVisible = true;
      // sessionStorage.setItem('oldPropertValue', row.propertyValue)
      // isEditPropertyShow为ture展示输入框
      // this.$set(this.tableDatas[index], 'isEditPropertyShow', true)
      // this.$message.success('提交成功！');
      //   this.showEdit[index] = true;
      //   this.showBtn[index] = true;

      //   this.$set(this.showEdit,row,true)
      //   this.$set(this.showBtn,row,true)
      row.edit = !row.edit;
      row.disabled = true;
    },

    //   // 触发搜索按钮
    handleSearch() {
      // this.$set(this.sex);
      // this.getData();
      this.$message.success("搜索成功");
    },
    //   // 删除操作
      handleDelete() {
        // 二次确认删除
        this.$confirm("确定要删除吗？", "提示", {
          type: "warning"
        })
            .then(() => {

              // this.tableData.splice(index, 1);
              this.querys.operation="delet"
              this.$message.success("删除成功");
              fetchData_employees(this.querys).then(res =>{
                console.log(res.data)
              })
            })
            .catch(() => {});
      },
      // 多选操作
      // handleSelectionChange(val) {
      //   this.multipleSelection = val;
      // },
      delAllSelection() {
        // const length = this.multipleSelection.length;
        // let str = "";
        // this.delList = this.delList.concat(this.multipleSelection);
        // for (let i = 0; i < length; i++) {
        //   str += this.multipleSelection[i].name + " ";
        // }
        // this.$message.error(`删除了${str}`);
        // this.multipleSelection = [];
        this.$message.success("删除成功");
      }, handleSave(){
      this.querys.operation="updat"
      fetchData_employees(this.tableDatas).then(res =>{
        console.log(res.data);

        // this.tableDatas[0] = res.data


        // this.name = res.data
      })
    },
    //   // 编辑操作
    handleCancle(row){
      row.edit = !row.edit;
      row.disabled = false;
    },

      // 保存编辑
      saveEdit() {
        this.editVisible = false;
        this.$message.success(`修改第 ${this.idx + 1} 行成功`);
        this.$set(this.tableData, this.idx, this.form);
      },
      // 分页导航
      handlePageChange(val) {
        this.$set(this.query, "pageIndex", val);
        this.getData();
      }
  }
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
